<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米网站</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>

<body>

    <header>
        <!-- 头部广告模块的制作 -->
        <div class="ad"></div>
        <!-- 头部导航栏的制作-->
        <div class="nav1">
            <ul class="w">
                <li><a href="#" class="left-nav">小米商城</a></li>
                <li><a href="#" class="left-nav">MIUI</a></li>
                <li><a href="#" class="left-nav">loT</a></li>
                <li><a href="#" class="left-nav">云服务</a></li>
                <li><a href="#" class="left-nav">金融</a></li>
                <li><a href="#" class="left-nav">有品</a></li>
                <li><a href="#" class="left-nav">小爱开放平台</a></li>
                <li><a href="#" class="left-nav">企业机构</a></li>
                <li><a href="#" class="left-nav">资质证照</a></li>
                <li><a href="#" class="left-nav">协议规则</a></li>
                <li><a href="#" class="left-nav">下载app</a></li>
                <li><a href="#" class="left-nav">SelectLocation</a></li>
                <li class="one">
                    <a href="#" class="last">购物车(0)</a>
                    <p>购物车中还没有商品，赶紧选购吧！</p>
                </li>
                <li><a href="#" class="right">消息通知</a></li>
                <li><a href="#" class="right">注册</a></li>
                <li><a href="#" class="right">登录</a></li>



            </ul>
        </div>
    </header>
    <article>
        <!-- 主题导航栏制作 -->
        <div class="nav2 w">
            <div class="box-left">
                <div class="box">
                    <img src="images/logo-footer.png" alt="">
                    <img src="images/logo.png" alt="">
                </div>
            </div>
            <div class="box-center">
                <ul>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">Redmi红米</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">智能软件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <form class="box-search">
                <input type="text">
                <button class="search-icon"></button>
                <div class="hot-list"></div>
            </form>
        </div>
        <!-- 主题制作 -->
        <div class="theme w">
            <div class="theme-left">
                <ul class="list1">
                    <li>
                        <a href="#" class="phone">手机 电话卡</a>
                        <div class="sild-list">
                            <ul class="list2">
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    </li>
                    <li>
                        <a href="#" class="phone">电视 盒子</a>
                        <div class="sild-list-2">
                            <ul class="list2">
                                <li>
                                    <a href="#">
                                        <img src="images/d712f71b3c4a3b562601c2b956a660ad.png" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="phone">笔记本 显示器 平板</a>
                        <div class="sild-list-3">
                            <ul class="list2">
                                <li>
                                    <a href="#">
                                        <img src="images/d712f71b3c4a3b562601c2b956a660ad.png" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt="">
                                        <span> 小米10 Pro</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#" class="phone">手机 电话卡</a></li>
                    <li><a href="#" class="phone">手机 电话卡</a></li>
                    <li><a href="#" class="phone">手机 电话卡</a></li>
                    <li><a href="#" class="phone">手机 电话卡</a></li>
                    <li><a href="#" class="phone">手机 电话卡</a></li>
                    <li><a href="#" class="phone">手机 电话卡</a></li>
                    <li><a href="#" class="phone">手机 电话卡</a></li>
                </ul>
            </div>
            <div class="theme-right"></div>
        </div>
        <!-- 主题导航栏 -->
        <div class="theme-nav w">
            <div class="box-left1">
                <ul>
                    <li>
                        <a href="#">
                            <div class="icon-1"></div>
                            <span>修理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="icon-1"></div>
                            <span>修理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="icon-1"></div>
                            <span>修理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="icon-1"></div>
                            <span>修理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="icon-1"></div>
                            <span>修理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="icon-1"></div>
                            <span>修理</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="box-right">
                <ul class="right-1">
                    <li><a href="#"><img src="images/7bc54a61b927dd8c54ddd39a0acf0254.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/7bc54a61b927dd8c54ddd39a0acf0254.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/7bc54a61b927dd8c54ddd39a0acf0254.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
        <!-- 产品页面的制作 -->
        <div class="product">
            <!-- 第一个产品 -->
            <div class="product-a w">
                <div class="product-a-hd">小米闪购</div>
                <div class="product-a-bd">
                    <ul>
                        <li>
                            <p class="first">14:00 场</p>
                            <img src="images/flash.png" alt="">
                            <p>距离结束还有1天</p>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/pms_1560238127.40319869.png" alt="">
                                <p class="one">小米手环4 NFC版 黑色</p>
                                <p class="two">大屏彩显，可刷公交、门禁</p>
                                <p class="three">209元 <span>229元</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/pms_1560238127.40319869.png" alt="">
                                <p class="one">小米手环4 NFC版 黑色</p>
                                <p class="two">大屏彩显，可刷公交、门禁</p>
                                <p class="three">209元 <span>229元</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/pms_1560238127.40319869.png" alt="">
                                <p class="one">小米手环4 NFC版 黑色</p>
                                <p class="two">大屏彩显，可刷公交、门禁</p>
                                <p class="three">209元 <span>229元</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/pms_1560238127.40319869.png" alt="">
                                <p class="one">小米手环4 NFC版 黑色</p>
                                <p class="two">大屏彩显，可刷公交、门禁</p>
                                <p class="three">209元 <span>229元</span></p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="product-1-img w">
                    <img src="images/406c0feca62732acbb2893344486895d.webp" alt="">
                </div>
            </div>
            <!-- 第二个产品 -->
            <div class="product-b w">
                <div class="product-2-hd">
                    <p>手机</p>
                    <a href="#">查看全部</a>
                </div>
                <div class="product-2-bd">
                    <div class="box-1"></div>
                    <div class="box-2">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="images/0099822e42b4428cb25c4cdebc6ca53d.jpg" alt="">
                                    <p class="one">小米10</p>
                                    <p class="two">骁龙865/1亿像素相机</p>
                                    <p class="three">3999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/0099822e42b4428cb25c4cdebc6ca53d.jpg" alt="">
                                    <p class="one">小米10</p>
                                    <p class="two">骁龙865/1亿像素相机</p>
                                    <p class="three">3999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/0099822e42b4428cb25c4cdebc6ca53d.jpg" alt="">
                                    <p class="one">小米10</p>
                                    <p class="two">骁龙865/1亿像素相机</p>
                                    <p class="three">3999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/0099822e42b4428cb25c4cdebc6ca53d.jpg" alt="">
                                    <p class="one">小米10</p>
                                    <p class="two">骁龙865/1亿像素相机</p>
                                    <p class="three">3999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/0099822e42b4428cb25c4cdebc6ca53d.jpg" alt="">
                                    <p class="one">小米10</p>
                                    <p class="two">骁龙865/1亿像素相机</p>
                                    <p class="three">3999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/0099822e42b4428cb25c4cdebc6ca53d.jpg" alt="">
                                    <p class="one">小米10</p>
                                    <p class="two">骁龙865/1亿像素相机</p>
                                    <p class="three">3999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/0099822e42b4428cb25c4cdebc6ca53d.jpg" alt="">
                                    <p class="one">小米10</p>
                                    <p class="two">骁龙865/1亿像素相机</p>
                                    <p class="three">3999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/0099822e42b4428cb25c4cdebc6ca53d.jpg" alt="">
                                    <p class="one">小米10</p>
                                    <p class="two">骁龙865/1亿像素相机</p>
                                    <p class="three">3999元起</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <img src="images/41d16e66381cfeda7b6b39ab67678d5e.jpg" alt="" class="last">
            </div>
            <!-- 第三个产品 -->
            <div class="product-3 w">
                <div class="product-3-hd">家电</div>
                <div class="product-3-bd">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="images/b56fd90a60e3d9e5d87dae9fbd427ea8.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg" alt="">
                                <p class="one">小米电视4A 32英寸</p>
                                <p class="two">人工智能系统，高清液晶屏</p>
                                <p class="three">799元</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg" alt="">
                                <p class="one">小米电视4A 32英寸</p>
                                <p class="two">人工智能系统，高清液晶屏</p>
                                <p class="three">799元</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg" alt="">
                                <p class="one">小米电视4A 32英寸</p>
                                <p class="two">人工智能系统，高清液晶屏</p>
                                <p class="three">799元</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg" alt="">
                                <p class="one">小米电视4A 32英寸</p>
                                <p class="two">人工智能系统，高清液晶屏</p>
                                <p class="three">799元</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/b56fd90a60e3d9e5d87dae9fbd427ea8.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg" alt="">
                                <p class="one">小米电视4A 32英寸</p>
                                <p class="two">人工智能系统，高清液晶屏</p>
                                <p class="three">799元</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg" alt="">
                                <p class="one">小米电视4A 32英寸</p>
                                <p class="two">人工智能系统，高清液晶屏</p>
                                <p class="three">799元</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg" alt="">
                                <p class="one">小米电视4A 32英寸</p>
                                <p class="two">人工智能系统，高清液晶屏</p>
                                <p class="three">799元</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg" alt="">
                                <p class="one">小米电视4A 32英寸</p>
                                <p class="two">人工智能系统，高清液晶屏</p>
                                <p class="three">799元</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <img src="images/59e8fc8ba9718c266882719fb4bbcedd.jpg" alt="" class="dool">
            </div>
            <!-- 第四个产品 -->
            <div class="product-4 w">
                <div class="product-4-hd">
                    <p>视频</p>
                    <a href="#">查看全部</a>
                </div>
                <div class="product-4-bd">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
                                <p>小米10 8K手机拍大片</p>
                            </a>
                            <div class="icon-2"></div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
                                <p>小米10 8K手机拍大片</p>
                            </a>
                            <div class="icon-2"></div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
                                <p>小米10 8K手机拍大片</p>
                            </a>
                            <div class="icon-2"></div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
                                <p>小米10 8K手机拍大片</p>
                            </a>
                            <div class="icon-2"></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </article>
    <!-- 底部模块的制作 -->
    <footer>
        <div class="footer">
            <div class="footer-1 w">
                <div class="footer-hd">
                    <ul>
                        <li><a href="#">预约维修服务</a></li>
                        <li><a href="#">预约维修服务</a></li>
                        <li><a href="#">预约维修服务</a></li>
                        <li><a href="#">预约维修服务</a></li>
                        <li><a href="#">预约维修服务</a></li>
                    </ul>
                </div>
                <div class="footer-bd">
                    <div class="box-one">
                        <p>帮助中心</p>
                        <ul>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                        </ul>
                    </div>
                    <div class="box-one">
                        <p>帮助中心</p>
                        <ul>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                        </ul>
                    </div>
                    <div class="box-one">
                        <p>帮助中心</p>
                        <ul>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                        </ul>
                    </div>
                    <div class="box-one">
                        <p>帮助中心</p>
                        <ul>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                        </ul>
                    </div>
                    <div class="box-one">
                        <p>帮助中心</p>
                        <ul>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                        </ul>
                    </div>
                    <div class="box-one">
                        <p>帮助中心</p>
                        <ul>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">账户管理</a></li>
                        </ul>
                    </div>
                    <div class="box-two">
                        <p class="one">400-100-5678</p>
                        <p class="two">周一至周日 8:00-18:00 <br>
                            <span>（仅收市话费）</span>
                        </p>
                        <a href="#">人工客服</a>
                    </div>
                </div>
            </div>
            <div class="footer-2">
                <div class="box-3 w">
                    <img src="images/logo-footer.png" alt="" class="tp">
                    <div class="footer-2-right">
                        <p class="one">小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 |
                            小米商城隐私政策 |
                            小米商城用户协议 | 问题反馈 | 廉正举报 | 诚信合规 | Select Location</p>
                        <p class="two">© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号 <br>
                            （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告 <br>
                            增值电信业务许可证 网络食品经营备案（京）【2018】WLSPJYBAHF-12 食品经营许可证 <br>
                            违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </p>
                        <p class="three">
                        <ul>
                            <li><img src="images/truste.png" alt=""></li>
                            <li><img src="images/truste.png" alt=""></li>
                            <li><img src="images/truste.png" alt=""></li>
                        </ul>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

</body>

</html>